<template>
    <div class="step1">
        <!--顶部科室信息 -->
        <div class="top">
            <div class="hosname">{{ workData.baseMap?.hosname }}</div>
            <div class="line">|</div>
            <div>{{ workData.baseMap?.bigname }}</div>
        </div>
        <div class="department">{{ workData.baseMap?.depname }}</div>
        <!--中间日期-->
        <div class="center">
            <h1 class="time">{{ workData.baseMap?.workDateString }}</h1>
            <div class="container">
                <div class="item" v-for="item in workData.bookingScheduleList" :key="item"
                     :class="{active:item.status === -1 || item.availableNumber === -1, cur:item.workDate == workTime.workDate}"
                     @click="changeTime(item)"
                >
                    <div class="up">{{item.workDate}} {{item.dayOfWeek}}</div>
                    <div class="down">
                        <div v-if="item.status===-1">停止挂号</div>
                        <div v-if="item.status===1">即将放号</div>
                        <div v-if="item.status===0">
                            {{ item.availableNumber == -1? '号已约满' : `有号(${item.availableNumber})` }}
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination layout="prev, pager, next" :total=workData.total v-model:current-page="pageNo" @current-change="fetch"/>
        </div>
        <!-- 底部医生信息-->
        <div class="bottom">
            <!--即将放号-->
            <div class="will" v-if="workTime.status === 1">
                <span class="text">放号时间</span>
                <span class="will_time">明天： {{ workData.baseMap?.releaseTime }}</span>
                <div class="releaseTime">
                    <span>倒计时</span>
                    <el-countdown :value="value"/>
                </div>
            </div>
            <div class="doctor" v-else>
                <div class="morning">
                    <!-- 顶部文字提示 -->
                    <div class="tip">
                        <img src="../../../../assets/早上.png" alt="">
                        <span>上午号源</span>
                    </div>
                    <!-- 每一位医生信息 -->
                    <div class="doctor_info" v-for="doctor in morningDoctor" :key="doctor.id">
                        <!--医生名字-->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">
                                <span>{{ doctor.skill }}</span>
                            </div>
                        </div>
                        <!--价格-->
                        <div class="right">
                            <div class="price">￥ {{ doctor.amount }}</div>
                            <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber }}</el-button>
                        </div>
                    </div>
                </div>
                <div class="after">
                    <!-- 顶部文字提示 -->
                    <div class="tip">
                        <img src="../../../../assets/下午.png" alt="">
                        <span>下午号源</span>
                    </div>
                    <!-- 每一位医生信息 -->
                    <div class="doctor_info" v-for="doctor in afterDoctor" :key="doctor.id">
                        <!--医生名字-->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">
                                <span>{{ doctor.skill }}</span>
                            </div>
                        </div>
                        <!--价格-->
                        <div class="right">
                            <div class="price">￥ {{ doctor.amount }}</div>
                            <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Register_step1">
import {ref, onMounted,computed } from "vue";
import {useRoute,useRouter} from "vue-router";
import { reqRegister,reqDoctor } from "@/api/hospital";
import type {workData, DoctorResponseData, DoctorArr, Doctor} from "@/api/hospital/type";

    let $route = useRoute();
    let $router = useRouter();
    // 倒计时时间
     // 获取当前日期
    const now = new Date();

    // 设置第二天的 8 点半时间
    const targetDate = new Date(now);
    targetDate.setDate(now.getDate() + 1);  // 设置为明天
    targetDate.setHours(8, 30, 0, 0);  // 设置倒计时倒数时间

    // 获取目标时间的时间戳
    const value = ref(targetDate.getTime());

    let pageNo = ref<number>(1)
    let limit = ref<number>(6)
    // 存储数据
    let workData = ref<any>({})
    // 存储排班日期当前时间
    let workTime:any = ref({});
    // 存储每个医生的信息
    let docArr = ref<DoctorArr>([]);
    // 发送请求挂号数据封装函数
    const fetch = async () =>{
        let result:workData = await reqRegister(pageNo.value,limit.value,<string>$route.query.hoscode,<string>$route.query.depcode);
        // 存储数据
        if (result.code === 200){
            workData.value = result.data;
            // 将第一天数据存储到workTime
            workTime.value = workData.value.bookingScheduleList[0];
            // 获取一次医生信息
            await fetchDoctor();
        }
    }
    // 获取医生信息
    const fetchDoctor = async () =>{
        let hoscode:string  = $route.query.hoscode as string;
        let depcode:string = $route.query.depcode as string;
        let workDate:string = workTime.value.workDate;

        let result:DoctorResponseData = await reqDoctor(hoscode, depcode, workDate);
        if(result.code === 200){
            docArr.value = result.data;
        }
    }
    // 组件挂载完毕发送请求
    onMounted(()=>{
        fetch();

    });

    // 点击中间时间触发
    const changeTime = (item:any) =>{
        workTime.value = item;
        fetchDoctor();
    };

    // 计算属性，计算出上午的医生
    const morningDoctor = computed(()=>{
        return docArr.value.filter((item:Doctor)=>{
            return item.workTime === 0;
        })
    });
    // 计算属性，计算出下午的医生
    const afterDoctor = computed(()=>{
        return docArr.value.filter((item:Doctor)=>{
            return item.workTime === 1;
        })
    });

    // 路由跳转到第二步
    const goStep2 = (doctor:Doctor)=>{
        // 存储当前选中的医生信息
        localStorage.setItem("doctor",JSON.stringify(doctor));
        // 路由跳转
        $router.push({
            path:"/hospital/register_step2",
            query:{
                docId:doctor.id
            }
        })
    }
</script>

<style scoped>
    .step1{
        margin-top: 20px;
        margin-left: 20px;
    }
    .top{
        display: flex;
        justify-content: normal;
        align-items: center;
        color: #7f7f7f;
        font-size: 14px;
        margin-top: 30px;
        padding: 0;
        .line{
            margin: 0 20px;
        }
    }
    .department{
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: 20px;
    }
    .center{
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        .time{
            font-size: 14px;
        }
        .container{
            margin: 20px 0;
            width: 100%;
            display: flex;
            .item{
                flex: 1;
                height: 80px;
                border: 1px solid skyblue;
                margin: 0 10px;
                padding: 0;
                display: flex;
                flex-direction: column;
                color: rgb(73, 144, 241);
                transition: all 0.5s;
                border-radius: 4px;
                &.active{
                    border: 1px solid #ccc;
                    color: #7f7f7f;
                    .up{
                        background-color: #ccc;
                    }
                }
                &.cur{
                    transform: scale(1.1);
                    border: 0.8px solid rgb(73, 144, 241);
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;

                    .up{
                        background-color: rgb(73, 144, 241);
                        color: white;
                    }
                    .down{
                        font-weight: 700;
                    }
                }
                .up{
                    background-color: #e8f2ff ;
                    height: 30px;
                    text-align: center;
                }
                .down{
                    height: 60px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .item:hover{
                cursor: pointer;
            }
        }
    }
    .bottom{
        .will{
            text-align: center;
            .text{
                font-size: 16px;
                margin-right: 5px;
                color: rgb(51, 51, 51);
            }
            .will_time{
                font-size: 20px;
                margin-left: 10px;
                color:  rgb(73, 144, 241);
            }
            .releaseTime{
                display: flex;
                height: 80px;
                justify-content: center;
                align-items: center;
                ::v-deep(.el-statistic__number){
                    color: #55a6fe;
                    font-size: 50px;
                }
                span{
                    color: #7f7f7f;
                    font-size: 20px;
                    margin-right: 10px;
                }
            }
        }
        .doctor{
            .morning,.after{
                margin-top: 10px;
                .tip{
                    display: flex;
                    align-items: center;
                    span{
                        color: #7f7f7f;
                        font-weight: 900;
                        margin-left: 5px;
                        margin-top: 10px;
                    }
                }
                .doctor_info{
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0;
                    border-bottom: 1px solid #ccc;
                    .left{
                        .info{
                            color:skyblue;
                            margin: 20px 0;
                            span{
                                margin:0 5px;
                                font-size: 15px;
                                font-weight: 700;
                                color: black;
                            }
                        }
                        .skill{
                            margin: 10px 0;
                            span{
                                font-size: 14px;
                                color: rgb(153, 153, 153);
                                font-weight: 900;
                            }
                        }
                    }
                    .right{
                        width: 150px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .price{
                            color: #7f7f7f;
                            font-weight: 700;
                        }
                    }
                }
            }
        }
    }
</style>